<template>
  <div class="outer">
    <div class="box">
      <div class="dataTime">【发泡蜡车间一】{{ FormatTime(nowTime) }}</div>
      <div class="btn1" @click="btn1" title="压柱机 "></div>
      <div class="btn2" @click="btn2" title="插芯机"></div>
      <div class="btn3" @click="btn3" title="自动上线"></div>
      <div class="btn4" @click="btn4" title="预热罩"></div>
      <div class="btn5" @click="btn5" title="制冷系统"></div>
      <div class="btn6" @click="btn6" title="化蜡系统"></div>
      <div class="btn7" @click="btn7" title="发泡蜡"></div>
      <div class="btn8" @click="btn8" title="灌装"></div>
      <div class="btn9" @click="btn9" title="包装机"></div>
      <div class="btn10" @click="btn10" title="网带线"></div>
      <div class="btn11" @click="btn11" title="贴标机"></div>
      <div class="btn12" @click="btn12" title="自动下线"></div>
      <div class="btn13" @click="btn13" title="螺旋提升线"></div>
      <!-- <div class="laber">
        <el-table
          v-loading="loading"
          :data="postList"
          border
          :model="queryParams"
          style="width: 600px"
          :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
        >
          <el-table-column
            label="当前功耗(W)"
            align="center"
            prop="deviceConsumptionNow"
          />
          <el-table-column
            label="今日能耗(KWH)"
            align="center"
            prop="deviceConsumptionAll"
          />
          <el-table-column
            label="本月能耗(KWH)"
            align="center"
            prop="deviceConsumptionAllMonth"
          />
        </el-table>
      </div> -->
      <div class="bg">
        <div class="app-container3">
          <el-table
            v-loading="loading"
            :data="liftData"
            :header-cell-style="{
              background: 'rgb(64, 158, 255)',
              color: 'rgb(255, 255, 255)',
            }"
            border
          >
            <el-table-column label="产量(个)" align="center" prop="zdxxNum" />
            <el-table-column
              label="速度(m/s)"
              align="center"
              prop="zdxxSpeed"
            />
          </el-table>
        </div>
        <div class="app-container4">
          <el-table
            border
            :header-cell-style="{
              background: 'rgb(64, 158, 255)',
              color: 'rgb(255, 255, 255)',
            }"
            v-loading="loading"
            :data="liftData"
            class="c1"
          >
            <el-table-column label="温度(℃)" align="center" prop="zl1Temp" />
            <el-table-column label="制冷二段" align="center" prop="zl2Temp" />
            <el-table-column label="制冷三段" align="center" prop="zl3Temp" />
            <el-table-column label="能耗" align="center" prop="zlConsum" />
          </el-table>
        </div>
        <div class="app-container5">
          <el-table
            :header-cell-style="{
              background: 'rgb(64, 158, 255)',
              color: 'rgb(255, 255, 255)',
            }"
            border
            v-loading="loading"
            :data="liftData"
          >
            <el-table-column label="内温(℃)" align="center" prop="yrzTemp" />
            <el-table-column
              label="胎膜温度"
              align="center"
              prop="yrzGlassTemp"
            />
            <el-table-column
              label="能耗(KWH)"
              align="center"
              prop="yrzConsum"
              width="100"
            />
          </el-table>
        </div>
        <div class="app-container6">
          <el-table
            :header-cell-style="{
              background: 'rgb(64, 158, 255)',
              color: 'rgb(255, 255, 255)',
            }"
            v-loading="loading"
            :data="liftData"
            border
          >
            <el-table-column
              label="蜡温1(℃)"
              align="center"
              prop="waxTemp1"
              width="80px"
            />
            <el-table-column
              label="蜡温2(℃)"
              align="center"
              prop="waxTemp2"
              width="80px"
            />
            <el-table-column
              label="蜡温3(℃)"
              align="center"
              prop="waxTemp3"
              width="80px"
            />
            <el-table-column
              label="蜡温4(℃)"
              align="center"
              prop="waxTemp4"
              width="80px"
            />
            <el-table-column
              label="蜡温5(℃)"
              align="center"
              prop="waxTemp5"
              width="80px"
            />
            <el-table-column
              label="出油口(℃)"
              align="center"
              prop="oilTemp"
              width="90px"
            />
            <el-table-column
              label="能耗(KWH)"
              align="center"
              prop="oilConsum"
              width="100px"
            />
            <!-- <el-table-column label="能耗(KWH)" align="center" prop="consumption" width="100px" /> -->
          </el-table>
        </div>
        <div class="app-container7">
          <el-table
            border
            :header-cell-style="{
              background: 'rgb(64, 158, 255)',
              color: 'rgb(255, 255, 255)',
            }"
            v-loading="loading"
            :data="liftData"
          >
            <el-table-column
              label="水温(℃)"
              align="center"
              prop="fplWarmTemp"
              width="70px"
            />
            <el-table-column
              label="能耗(KWH)"
              align="center"
              prop="fplConsum"
              width="90px"
            />
            <el-table-column
              label="注蜡管道温度(℃)"
              align="center"
              prop="waxInTemp"
              width="140px"
            /><el-table-column
              label="冷却水[入]管道温度(℃)"
              align="center"
              prop="inColdTemp"
              width="160px"
            />
            <el-table-column
              label="冷却水[出]管道温度(℃)"
              align="center"
              prop="outColdTemp"
              width="160px"
            />
          </el-table>
        </div>
        <div class="app-container8" style="margin-left: -120px">
          <el-table
            :header-cell-style="{
              background: 'rgb(64, 158, 255)',
              color: 'rgb(255, 255, 255)',
            }"
            border
            v-loading="loading"
            :data="liftData"
          >
            <el-table-column
              label="分钟产量(个)"
              align="center"
              prop="lxtsSpeed"
              width="95px"
            />
            <el-table-column
              label="总产量(个)"
              align="center"
              prop="lxtsNum"
              width="90px"
            />
          </el-table>
        </div>
        <div class="app-container9" style="margin-left: -120px">
          <el-table
            border
            :header-cell-style="{
              background: 'rgb(64, 158, 255)',
              color: 'rgb(255, 255, 255)',
            }"
            v-loading="loading"
            :data="liftData"
          >
            <el-table-column
              label="速度(m/s)"
              align="center"
              prop="zdxxSpeed"
              width="80px"
            />
            <el-table-column
              label="产量(个)"
              align="center"
              prop="zdxxNum"
              width="80px"
            />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { oilnow, lineState } from "@/api/system/line.js";
export default {
  data() {
    return {
      times: null,
      timer: undefined,
      nowTime: new Date(),
      loading: false,
      postList: [],
      queryParams: {
        deviceConsumptionNow: null,
        deviceConsumptionAll: null,
        deviceConsumptionAllMonth: null,
      },
      liftData: [
        {
          yzjNum: null,
          cdxjNum: null,
          zdxxNum: null,
          zdxxSpeed: null,
          wdx1Num: null,
          wdx1Speed: null,
          zlTemp: null,
          zlConsum: null,
          waxTemp1: null,
          waxTemp2: null,
          waxTemp3: null,
          waxTemp4: null,
          waxTemp5: null,
          oilTemp: null,
          oilConsum: null,
          fplWarmTemp: null,
          fplConsum: null,
          yrzTemp: null,
          yrzGlassTemp: null,
          yrzConsum: null,
          gzBottle: null,
          lxtsSpeed: null,
          zdsxNum: null,
          zdsxSpeed: null,
          tbNum: null,
          wdx2Num: null,
          wdx2Speed: null,
          bzNum: null,
        },
      ],
    };
  },
  created() {
    // 显示时间
    this.timer = setInterval(() => {
      this.nowTime = new Date().toLocaleString();
    });
    this.getList();
    this.times = setInterval(() => {
      this.getList();
    }, 100000 * 10);
    this.List();
  },

  // 销毁定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  destroyed() {
    //销毁
    clearInterval(this.times);
  },
  methods: {
    btn1() {
      this.$router.push("/test/show/cartDevice/cjfpl/yzj");
    },
    btn2() {
      // this.$router.push("/workshop/cartDevice/cxj");
      alert("当前设备暂无页面");
    },
    btn3() {
      this.$router.push("/test/show/cartDevice/cjfpl/zdsx");
    },
    btn4() {
      this.$router.push("/test/show/cartDevice/cjfpl/yrz");
    },
    btn5() {
      this.$router.push("/test/show/cartDevice/cjfpl/zlxt");
    },
    btn6() {
      this.$router.push("/test/show/cartDevice/cjfpl/oil");
    },
    btn7() {
      this.$router.push("/test/show/cartDevice/cjfpl/fpl");
    },
    btn8() {
      // this.$router.push("/workshop/cartDevice/yzj");
      this.$router.push("/test/show/cartDevice/cjfpl/yrz");
    },
    btn9() {
      // this.$router.push("/workshop/cartDevice/yzj");
      alert("当前设备暂无页面");
    },
    btn10() {
      // this.$router.push("/workshop/cartDevice/yzj");
      this.$router.push("/test/show/cartDevice/cjfpl/zdsx");
    },
    btn11() {
      // this.$router.push("/workshop/cartDevice/yzj");
      alert("当前设备暂无页面");
    },
    btn12() {
      this.$router.push("/test/show/cartDevice/cjfpl/down");
    },
    btn13() {
      this.$router.push("/test/show/cartDevice/cjfpl/lxsx");
    },

    getList() {
      this.loading = true;
      oilnow().then((response) => {
        this.postList = response.data;
        this.loading = false;
      });
      console.log(this.queryParams);
    },
    List() {
      this.loading = true;
      lineState().then((response) => {
        this.liftData = response.data;
        this.loading = false;
      });
      console.log(this.queryParams);
    },
    FormatTime() {
      //返回显示的日期时间格式
      var date = new Date();
      var year = this.formatTime(date.getFullYear());
      var month = this.formatTime(date.getMonth() + 1);
      var day = this.formatTime(date.getDate());
      var hour = this.formatTime(date.getHours());
      var minute = this.formatTime(date.getMinutes());
      var second = this.formatTime(date.getSeconds());
      var weekday = date.getDay();
      var weeks = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      var week = weeks[weekday];
      return `${year}-${month}-${day} ${hour}:${minute}:${second} ${week}`;
    },
    formatTime(n) {
      //判断是否需要加0
      if (n < 10) {
        return "0" + n;
      } else {
        return n;
      }
    },
  },
};
</script>

<style>
.outer {
  overflow: auto;
}

.dataTime {
  font-size: 38px;
  color: #19198c;
}
.box {
  /* border: 1px red solid; */
  display: flex;
  /* height: 100%; */
  width: 1680px;
  /* width: 1680px; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1920px;
}
.bg {
  background: url("../../../assets/images/bcgg.jpg");
  height: 928px;
  width: 100%;
  background-repeat: round;
  position: relative;
}
.laber {
  margin-top: 20px;
}
.app-container3 {
  

  width: 163px;
  position: relative;
  top: 240px;
  left: 655px;
}
.app-container4 {
  width: 322px;
  position: absolute;
  top: 240px;
  right: 58px;
}
.app-container5 {
  width: 261px;
  position: absolute;
  top: 240px;
  right: 488px;
}
.app-container6 {
  width: 591px;
  position: absolute;
  top: 520px;
  left: 78px;
}
.app-container7 {
  width: 621px;
  position: absolute;
  top: 520px;
  left: 678px;
}
.app-container8 {
  width: 186px;
  position: absolute;
  top: 790px;
  right: 160px;
}
.app-container9 {
  width: 161px;
  position: absolute;
  top: 790px;
  right: 488px;
}

.el-table__header-wrapper {
  height: 45px;
  align-content: center;
  /* background-color: rgb(64, 158, 255);
   */
}
.btn1 {
  /* border: 1px red solid; */
  width: 142px;
  height: 142px;
  position: absolute;
  top: 135px;
  left: 66px;
  /* 元素被背景挡住，置顶 */
  z-index: 1;
}

.btn1:hover {
  cursor: pointer;
}
.btn2 {
  /* border: 1px red solid; */
  width: 142px;
  height: 142px;
  position: absolute;
  top: 135px;
  left: 346px;
  z-index: 1;
}
.btn2:hover {
  cursor: pointer;
}
.btn3 {
  width: 142px;
  height: 142px;
  position: absolute;
  top: 135px;
  left: 666px;
  z-index: 1;
}

.btn3:hover {
  cursor: pointer;
}
.btn4 {
  width: 142px;
  height: 142px;
  position: absolute;
  top: 135px;
  left: 988px;
  z-index: 1;
}
.btn4:hover {
  cursor: pointer;
}
.btn5 {
  width: 142px;
  height: 142px;
  position: absolute;
  top: 135px;
  left: 1388px;
  z-index: 1;
}
.btn5:hover {
  cursor: pointer;
}
.btn6 {
  width: 142px;
  height: 142px;
  position: absolute;
  top: 405px;
  left: 288px;
  z-index: 1;
}
.btn6:hover {
  cursor: pointer;
}
.btn7 {
  width: 142px;
  height: 142px;
  position: absolute;
  top: 405px;
  left: 788px;
  z-index: 1;
}
.btn7:hover {
  cursor: pointer;
}
.btn8 {
  width: 142px;
  height: 142px;
  position: absolute;
  top: 405px;
  left: 1220px;
  z-index: 1;
}
.btn8:hover {
  cursor: pointer;
}
.btn9 {
  width: 142px;
  height: 142px;
  position: absolute;
  top: 690px;
  left: 71px;
  z-index: 1;
}
.btn9:hover {
  cursor: pointer;
}
.btn10 {
  width: 142px;
  height: 142px;
  position: absolute;
  top: 690px;
  left: 361px;
  z-index: 1;
}
.btn10:hover {
  cursor: pointer;
}
.btn11 {
  width: 142px;
  height: 142px;
  position: absolute;
  top: 690px;
  left: 641px;
  z-index: 1;
}
.btn11:hover {
  cursor: pointer;
}
.btn12 {
  width: 142px;
  height: 142px;
  position: absolute;
  top: 690px;
  left: 1041px;
  z-index: 1;
}
.btn12:hover {
  cursor: pointer;
}
.btn13 {
  width: 142px;
  height: 142px;
  position: absolute;
  top: 690px;
  left: 1351px;
  z-index: 1;
}
.btn13:hover {
  cursor: pointer;
}
</style>
